<template>
  <div class="process-tab">
    <el-row :gutter="20" class="mb-6">
      <el-col :span="8">
        <el-card>
          <template #header>
            <div>
              <span class="font-bold mr-1" style="font-size: 14px">{{
                $t('flyparam.param_file_publish_progress')
              }}</span>
              <el-tooltip class="item" effect="dark" placement="right-start">
                <template #content>
                  <div style="width: 250px">
                    {{ $t('flyparam.param_file_publish_progress_tip') }}
                  </div></template
                >
                <i class="el-icon-info ml-2" />
              </el-tooltip></div
          ></template>
          <div v-loading="loading">
            <div
              v-if="progressTotalNum == 0"
              style="height: 400px; padding: 8%"
            >
              <el-empty
                :description="$t('flyparam.param_file_publish_progress_desc')"
              />
            </div>
            <div v-else style="text-align: center; height: 400px">
              <div class="py-5">
                <span style="font-size: 16px">{{
                  progressTotalNum -
                  progressPublishingNum +
                  '/' +
                  progressTotalNum
                }}</span>
                <div v-if="progressPublishingNum == 0" style="font-size: 14px">
                  {{
                    '(' +
                    $t('flyparam.param_file_publish_progress_finish_tip') +
                    ')'
                  }}
                </div>
              </div>
              <progress-bar
                ref="progressBar"
                :percentage="Number(percent.toFixed(2))"
              />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="terminal-update-chart">
          <template #header>
            <div>
              <span class="font-bold terminal-update-chart-header">{{
                $t('flyparam.param_file_update_statistics')
              }}</span>
            </div></template
          >
          <div v-loading="loading">
            <el-empty v-if="noData" :description="$t('common.no_data')" />
            <param-statistics-chart
              v-else
              ref="chart"
              :key="timestamp"
              :know-device="deviceUpdateInfos"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  queryPublishProgress,
  queryReleaseFileUsageStatistics
} from '@/api/parameter'
import ProgressBar from './progress-bar.vue'
import ParamStatisticsChart from './param-statistics-chart.vue'
export default {
  name: 'StatisticsTab',
  components: { ParamStatisticsChart, ProgressBar },
  props: {
    templateId: String,
    tab: String
  },
  data() {
    return {
      loading: false,
      percent: 0,
      progressTotalNum: 0,
      progressPublishingNum: 0,
      timestamp: -1,
      deviceUpdateInfos: [],
      noData: false
    }
  },
  watch: {
    // tab(newVal, oldVal) {
    //   if (newVal === 'statistics') {
    //   }
    // }
  },
  mounted() {
    this.getData()
  },
  methods: {
    resize() {
      this.$refs.progressBar && this.$refs.progressBar.resize()
      this.$refs.chart && this.$refs.chart.resize()
    },
    getData() {
      this.percent = 0
      this.loading = true
      queryPublishProgress(this.templateId)
        .then((res) => {
          this.progressTotalNum = res.total
          this.progressPublishingNum = res.publishingNum
          console.log(res)
          this.percent =
            res.total == 0
              ? 0
              : ((res.total - res.publishingNum) / res.total).toFixed(2) * 100
        })
        .finally(() => {
          this.loading = false
        })
      queryReleaseFileUsageStatistics(this.templateId).then((res) => {
        this.deviceUpdateInfos = []

        var keys = Object.keys(res)
        keys.forEach((key) => {
          var item = {}
          if (key == 'publish_success') {
            item = {
              name: this.$t('flyparam.file_status_2'),
              value: res[key],
              color: '#377DFF'
            }
            this.deviceUpdateInfos.push(item)
          } else if (key == 'download_success') {
            item = {
              name: this.$t('flyparam.file_status_3'),
              value: res[key],
              color: '#a0ffc4'
            }
            this.deviceUpdateInfos.push(item)
          } else if (key == 'update_success') {
            item = {
              name: this.$t('flyparam.file_status_4'),
              value: res[key],
              color: '#13ce66'
            }
            this.deviceUpdateInfos.push(item)
          } else if (key == 'update_fail') {
            item = {
              name: this.$t('flyparam.file_status_5'),
              value: res[key],
              color: '#ff7653'
            }
            this.deviceUpdateInfos.push(item)
          } else if (key == 'not_publish') {
            item = {
              name: this.$t('flyparam.file_status_1'),
              value: res[key],
              color: '#B9D2FF'
            }
            this.deviceUpdateInfos.push(item)
          }
        })
        if (
          this.deviceUpdateInfos
            .map((_) => _.value)
            .reduce((pre, curr) => pre + curr, 0) === 0
        ) {
          this.noData = true
        }
        this.timestamp = new Date().getTime()
      })
    },
    // 四舍五入保留两位小数
    keepTwoDecimalFull(num) {
      let result = parseFloat(num)
      if (isNaN(result)) {
        return false
      }
      result = Math.round(num * 100) / 100
      let s_x = result.toString() // 将数字转换为字符串

      let pos_decimal = s_x.indexOf('.') // 小数点的索引值

      // 当整数时，pos_decimal=-1 自动补0
      if (pos_decimal < 0) {
        pos_decimal = s_x.length
        s_x += '.'
      }

      // 当数字的长度< 小数点索引+2时，补0
      while (s_x.length <= pos_decimal + 2) {
        s_x += '0'
      }
      return Number(s_x)
    }
  }
}
</script>

<style lang="scss" scoped>
.process-tab {
  // padding: 15px 10px;

  .statistics-banner {
    background-color: #dcdee3;
    width: 100%;
    /*height: 46px;*/
    padding: 0 20px;
  }

  .statistics-title {
    /*margin-top: 50px;*/
    font-size: 24px;
  }

  .tips-button {
    border-radius: 12px;
    padding: 2px 10px;
    font-weight: 800;
    background-color: #f5ca99;
    display: inline-block;
    vertical-align: middle;
    .tips-text {
      vertical-align: middle;
    }
  }

  ::v-deep {
    .el-progress__text--line {
      display: inline-block;
      margin-right: 5px;
      font-size: 14px !important;
    }
    .el-card__body {
      position: relative;
      padding: 0;
    }

    .terminal-update-chart {
      .el-card__body {
        min-height: 400px;
      }
      &-header {
        line-height: 45px;
      }
    }

    .el-progress--line {
      display: flex;
      width: 100%;
      align-items: center;
    }
  }
}
</style>
